<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发红包</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
  <div class="container">
    <header class="header">
      <button class="back-btn" onclick="window.history.back()">←</button>
      <h2>发红包</h2>
    </header>
    
    <div class="section">
      <div class="form-group">
        <label>选择接收人：</label>
        <select id="recipient">
          <option value="">请选择好友</option>
          <option value="张三">张三</option>
          <option value="李四">李四</option>
          <option value="王五">王五</option>
          <option value="赵六">赵六</option>
        </select>
      </div>

      <div class="form-group">
        <label>红包金额：</label>
        <div style="display: flex; align-items: center; gap: 10px;">
          <input type="number" id="redpack-amount" step="0.01" min="0.01" max="200" placeholder="0.00">
          <span>元</span>
        </div>
      </div>

      <div class="form-group">
        <label>祝福语：</label>
        <input type="text" id="blessing" placeholder="恭喜发财，大吉大利">
      </div>

      <button onclick="sendRedpack()" style="width: 100%;">发送红包</button>
    </div>
  </div>
  
  <script>
    // 模拟用户余额
    let userBalance = 12345.67;

    // 更新余额显示
    function updateBalance() {
      const balance = document.getElementById('balance');
      if (balance) {
        balance.textContent = userBalance.toFixed(2);
      }
      const balanceShow = document.getElementById('balance-show');
      if (balanceShow) {
        balanceShow.textContent = userBalance.toFixed(2);
      }
    }

    function sendRedpack() {
      const recipient = document.getElementById('recipient').value;
      const amount = parseFloat(document.getElementById('redpack-amount').value);
      const blessing = document.getElementById('blessing').value || '恭喜发财，大吉大利';

      if (!recipient || isNaN(amount) || amount < 0.01 || amount > 200) {
        alert('请填写正确信息（金额范围：0.01-200元）');
        return;
      }

      if (confirm(`向 ${recipient} 发送 ${amount} 元红包\n祝福语：${blessing}`)) {
        // 模拟扣除余额
        userBalance -= amount;
        updateBalance();
        alert('红包已发送！');
        window.history.back(); // 返回上一页
      }
    }

    // 页面加载时更新余额显示
    window.onload = function () {
      updateBalance();
    };
  </script>
</body>
</html>